<template>
  <div>
    <div class="flex items-center">
      <span>昵称：</span>
      <span
        v-if="isEditName"
        class="cursor-pointer font-bold"
        @click="handleEditName"
      >
        {{ name }}
      </span>
      <input
        class="ring-2"
        ref="nameInput"
        v-else
        v-model="name"
        type="text"
        @blur="submitEditName"
        @keyup.enter="submitEditName"
      />
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isEditName: true,
      name: "LynnHg",
    };
  },
  methods: {
    handleEditName() {
      this.isEditName = false;
      this.$nextTick(function () {
        this.$refs.nameInput.focus();
      });
      // setTimeout(() => {
      //   console.log(this.$refs.nameInput);
      //   this.$refs.nameInput.focus();
      // });
    },
    async submitEditName() {
      this.isEditName = true;
      // 发请求保存修改后的数据
      // ...
    },
  },
};
</script>

<style scoped>
input {
}
</style>
